<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery方法</title>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 15px;
            border: #000 1px solid;
            font-size: 17px;
            float: left;
        }

        div.bgRed {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        .cla1 {
            background-color: #aaaaaa;
        }

        .cla2 {
            color: red;
        }

        ul {
            padding: 20px;
            background-color: #aaaaaa;
            width: 200px;
        }

        li {
            background-color: #3399dd;
            margin: 10px;
            width: 180px;
        }

        hr {
            clear: both
        }
    </style>
    <script
            src="http://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
            crossorigin="anonymous">
        // 最新版的jquery 3.5.1
    </script>
    <script>
        $(function () {
            nodeMethod();
        });

        function nodeMethod() {
            // TODO 文档操作相关操作
            let $ul = $("ul:first");
            // 获取ul
            $ul.after("<li>after的li</li>");
            // 在ul外面的后面插入
            $ul.before("<li>before的li</li>");
            // 在ul外面的前面插入
            $ul.append("<li>append的li</li>");
            // 在ul内部的后面插入
            $ul.prepend("<li>prepend的li</li>");
            // 在ul外面插入前面插入

            // 删除 empty();

            // $ul.empty();
            // $ul.html(" ");
            // $ul.remove();
            // $("ul li").remove(":contains('1')");
            // 删除文本内容包含1的li


            // 创建标签
            let $hr = $("<hr/>");
            // 创建一个hr标签
            $ul.append($hr);
            // 把hr添加到ul之后

        }
    </script>
</head>
<body>
<div id="div_1">div_11<font>font1</font></div>
<div id="div_2">div_12<font>font2</font></div>
<div id="div_3" class="cla1">div_13</div>
<div id="div_4">div_14</div>
<input type="text" id="input_1" style="clear:both;"/><br/>
<hr/>

<ul>
    <li>li标签1</li>
    <li>li标签1</li>
    <li>li标签1</li>
</ul>
</body>
</html>`